<template>
  <div class="panel">
    <div class="header">系统设置</div>
    <div class="form">
      <div class="row">
        <label>默认保存路径</label>
        <input v-model="local.savePath" placeholder="选择或填写保存目录" />
        <button @click="onPickSavePath">选择</button>
      </div>
      <div class="row">
        <label>界面语言</label>
        <select v-model="local.lang">
          <option value="zh-CN">简体中文</option>
          <option value="en">English</option>
        </select>
      </div>
      <div class="actions">
        <button class="primary" @click="onSave">保存</button>
        <button @click="onReset">重置</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, watch } from 'vue'
import * as Manager from '../../wailsjs/go/main/Manager.js'

const props = defineProps({ settings: { type: Object, default: () => ({}) } })
const emit = defineEmits(['save-settings'])

const local = reactive({ savePath: '', lang: 'zh-CN' })

function assign(){
  local.savePath = props.settings?.savePath || ''
  local.lang = props.settings?.lang || 'zh-CN'
}
watch(() => props.settings, assign, { deep: true, immediate: true })

async function onPickSavePath(){
  try {
    const p = await Manager.PickFolder()
    if (p) local.savePath = p
  } catch (e) { console.error(e) }
}

function onSave(){ emit('save-settings', { savePath: local.savePath, lang: local.lang }) }
function onReset(){ assign() }
</script>

<style scoped>
.panel { padding: 12px; display: grid; gap: 12px; }
.header { font-weight: 600; font-size: 14px; }
.form { display: grid; gap: 10px; max-width: 720px; }
.row { display: grid; grid-template-columns: 140px 1fr auto; align-items: center; gap: 10px; }
.row select, .row input { height: 30px; padding: 4px 8px; border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; background: transparent; color: #e6e6e6; }
.actions { display: flex; gap: 8px; }
button { height: 30px; padding: 0 12px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); color: #e6e6e6; }
button.primary { background: #2b6cb0; border-color: #2b6cb0; }
</style>
